<template>
  <div class="container">
    <el-card style="width: 98%;">
      <div slot="header">个人中心</div>
      <el-form :model="form" :rules="rules" ref="refForm" label-width="100px">
        <el-form-item label="用户ID:" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名:" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名:" prop="name">
          <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="头像：" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8000/v1_0/user/profile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日：" prop="birthday">
          <el-date-picker v-model="form.birthday" type="date" placeholder="选择生日"></el-date-picker>
        </el-form-item>
        <el-form-item label="个人介绍：" prop="intro">
          <el-input type="textarea" v-model="form.intro" placeholder="请输入个人介绍"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
      {{ form }}
    </el-card>
  </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  data () {
    return {
      form: {
        userId: '123456',
        username: '张三',
        name: '张三',
        gender: 0,
        birthday: '2018-12-20',
        intro: '这是一个示例个人介绍。',
        avatar: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birthday: [{ required: true, message: '请选择生日', trigger: 'change' }],
        intro: [{ required: true, message: '请输入个人介绍', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          Message.success('保存成功')
          // 处理保存逻辑
        } else {
          Message.error('请填写完整信息')
        }
      })
    },
    handleAvatarSuccess (response, file) {
      if (response.data && response.data.url) {
        this.form.avatar = response.data.url
        Message.success('头像上传成功')
      } else {
        Message.error('上传失败，请重试')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        Message.error('上传头像图片只能是 JPG 或 PNG 格式!')
        return false
      }
      if (!isLt2M) {
        Message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    async uploadFile (obj) {
      console.log('上传', obj)
      const fd = new FormData()
      fd.append('image', obj.file)
      const res = await this.$http.PATCH('/v1_0/user/profile', fd)
      // console.log(res)
      this.form.avatar.push(res.data.data.url)
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ffffff;
}
.el-form-item {
  margin-bottom: 24px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
